<template>
  <div class="login-container">
    <div class="login-content">
      <div class="login-header">
        <router-link to="/" class="logo-router-link">
          <div class="logo-container">
            <img src="@/assets/images/logo.png" alt="Sakura OJ Logo" class="logo" />
            <h1 class="site-name">Sakura OJ</h1>
          </div>
        </router-link>
        <p class="slogan">在代码的樱花雨中绽放你的才华</p>
      </div>
      
      <div class="login-form-container">
        <h2>登录</h2>
        <a-form
          ref="formRef"
          :model="form"
          layout="vertical"
          @submit="handleSubmit"
          :rules="rules"
        >
          <a-form-item field="userAccount" label="账号">
            <a-input 
              v-model="form.userAccount" 
              placeholder="请输入账号" 
              :style="{ width: '100%' }"
              allow-clear
            >
              <template #prefix>
                <icon-user />
              </template>
            </a-input>
          </a-form-item>
          
          <a-form-item field="userPassword" label="密码">
            <a-input-password 
              v-model="form.userPassword" 
              placeholder="请输入密码" 
              :style="{ width: '100%' }"
              allow-clear
            >
              <template #prefix>
                <icon-lock />
              </template>
            </a-input-password>
          </a-form-item>
          
          <a-form-item>
            <a-button 
              type="primary" 
              html-type="submit" 
              long 
              :loading="loading"
              class="login-button"
            >
              登录
            </a-button>
          </a-form-item>
          
          <div class="register-link">
            <span>还没有账号？</span>
            <router-link to="/register">
              <a-link>立即注册</a-link>
            </router-link>
          </div>
        </a-form>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Message } from '@arco-design/web-vue'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const formRef = ref()
const loading = ref(false)

const form = reactive({
  userAccount: '',
  userPassword: '',
})

const rules = {
  userAccount: [
    { required: true, message: '请输入账号' },
  ],
  userPassword: [
    { required: true, message: '请输入密码' },
  ]
}

const handleSubmit = async (data: {
  values: Record<string, any>;
  errors: Record<string, any> | undefined;
}) => {
  if (data.errors) return
  
  try {
    loading.value = true
    await userStore.login({
      authType: 'password',
      data: JSON.stringify({ 
       ...form
      })
    })
    
    // 登录成功后获取用户信息
    await userStore.getUserInfo()
    
    Message.success('登录成功')
    
    // 获取重定向地址，如果存在则跳转，否则回到首页
    const redirectPath = route.query.redirect ? String(route.query.redirect) : '/'
    router.push(redirectPath)
  } catch (error) {
    console.error('登录失败', error)
    Message.error('登录失败，请检查账号和密码')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.login-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.login-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  max-height: 95vh;
  margin-top: 15vh;
}

.login-header {
  text-align: center;
  margin-bottom: 20px;
}

.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin-bottom: 5px; */ /* 由 router-link 控制，或按需调整 */
}

.logo-router-link {
  text-decoration: none; /* 移除链接下划线 */
  display: inline-block; /* 使 router-link 表现得像一个块级元素，以便更好地控制布局 */
  margin-bottom: 5px; /* 将原 logo-container 的 margin-bottom 移到这里 */
}

.logo {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.site-name {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0;
  background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.slogan {
  font-size: 14px;
  color: #666;
  margin-top: 3px;
}

.login-form-container {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow-y: auto;
  flex: 1;
}

.login-form-container h2 {
  text-align: center;
  margin-bottom: 16px;
  font-size: 20px;
  color: #333;
}

.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.login-button {
  background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  border: none;
  height: 38px;
  font-size: 15px;
  transition: all 0.3s ease;
}

.login-button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 154, 158, 0.4);
}

.register-link {
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
  color: #666;
}

.login-footer {
  text-align: center;
  margin-top: 16px;
  font-size: 12px;
  color: #999;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .login-content {
    padding: 15px 10px;
    max-height: 100vh;
  }
  
  .login-form-container {
    padding: 15px;
  }
  
  .site-name {
    font-size: 22px;
  }
  
  .slogan {
    font-size: 13px;
  }
}

/* 针对较小高度的屏幕 */
@media (max-height: 700px) {
  .login-content {
    padding: 10px;
  }
  
  .login-header {
    margin-bottom: 10px;
  }
  
  .logo {
    width: 35px;
    height: 35px;
  }
  
  .site-name {
    font-size: 20px;
  }
  
  .login-form-container {
    padding: 15px;
  }
  
  .login-form-container h2 {
    margin-bottom: 12px;
    font-size: 18px;
  }
  
  .login-footer {
    margin-top: 10px;
    font-size: 11px;
  }
}
</style>
